<template>
	<div>
		<el-dialog
			title="新增服务API"
			:visible.sync="dialogTableVisible"
			:close-on-click-modal="false"
			:show-close="false"
			:close-on-press-escape="false"
		>
			<el-form ref="ruleForm" :model="ruleForm" label-width="200px">
				<el-form-item label="名称：">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
				<el-form-item label="API代码：">
					<el-input v-model="ruleForm.ApiCode"></el-input>
				</el-form-item>
				<el-form-item label="ApiKey：">
					<el-input v-model="ruleForm.ApiKey"></el-input>
				</el-form-item>
				<el-form-item label="是否启用：">
					<el-switch
						v-model="ruleForm.switch"
						active-value="0"
						inactive-value="1"
					></el-switch>
				</el-form-item>
				<el-form-item label="请选择失效时间:">
					<el-date-picker
						v-model="ruleForm.expiryDate"
						type="date"
						placeholder="选择日期"
						value-format="yyyy-MM-dd"
						@change="triggerDate"
					>
					</el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="confirm('ruleForm')"
					>确 定
				</el-button>
				<el-button @click="cancel('ruleForm')">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		dialogTableVisible: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			ruleForm: {
				name: '',
				ApiCode: '',
				ApiKey: '',
				switch: '1',
				expiryDate: '',
			},
		}
	},
	methods: {
		triggerDate() {
			console.log(this.ruleForm.expiryDate, '测试')
		},
		// 确定
		confirm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					console.log(this.ruleForm)
					// let param = {
					// 	paramName: this.ruleForm.name,
					// 	datasql: this.ruleForm.dataSql,
					// }
					// formulaPageList(param).then(({ data }) => {
					// 	console.log(data)
					// 	if (data.head.code == 200) {
					// 		this.$message({
					// 			message: '保存成功',
					// 			type: 'success',
					// 		})
					// 	}
					// })
					this.ruleForm = {
						name: '',
						ApiCode: '',
						ApiKey: '',
						switch: '1',
						expiryDate: '',
					}
					let dialogValue = {
						verdict: false,
						typeValue: 1,
					}
					this.$emit('newlyClick', dialogValue)
				} else {
					return false
				}
			})
			console.log('确定')
		},

		// 取消
		cancel() {
			let dialogValue = {
				verdict: false,
				typeValue: 0,
			}
			this.ruleForm = {
				name: '',
				ApiCode: '',
				ApiKey: '',
				switch: '1',
				expiryDate: '',
			}
			this.$emit('newlyClick', dialogValue)
			this.$nextTick(() => {
				this.$refs['ruleForm'].clearValidate()
			})

			console.log('取消')
		},
	},
}
</script>

<style></style>
